<div th:fragment="html">
    <script>
        function showProductsAsideCategorys(cid){
            $("div.eachCategory[cid="+cid+"]").css("background-color","white");
            $("div.eachCategory[cid="+cid+"] a").css("color","#87CEFA");
            $("div.productsAsideCategorys[cid="+cid+"]").show();

        }

        function hideProductsAsideCategorys(cid){
            $("div.eachCategory[cid="+cid+"]").css("background-color","#e2e2e3");
            $("div.eachCategory[cid="+cid+"] a").css("color","#000");
            $("div.productsAsideCategorys[cid="+cid+"]").hide();
        }
    </script>
    <img src="img/site/catear.png" th:src="@{/img/site/catear.png}" id="catear" class="catear"/>

    <div class="categoryWithCarousel">


        <div class="headbar show1">
            <div class="head ">

                <span style="margin-left:10px" class="glyphicon glyphicon-th-list"></span>
                <span style="margin-left:10px" >商品分类</span>

            </div>

            <div class="rightMenu">
                <span><a href=""><img src="img/site/chaoshi.png" th:src="@{/img/site/chaoshi.png}"/></a></span>
                <span><a href=""><img src="img/site/guoji.png" th:src="@{/img/site/guoji.png}"/></a></span>

                <span v-for="c,index in categories" v-if='index<=3'>
                    <a :href="'category?cid='+c.id">{{c.name}}</a>
                </span>
            </div>

        </div>

        <div style="position: relative">
            <div th:replace="common/fore/home/categoryMenu::html" ></div>
        </div>

        <div style="position: relative;left: 0;top: 0;">
            <div th:replace="common/fore/home/productsAsideCategorys::html" ></div>
        </div>


        <div th:replace="common/fore/home/carousel::html" ></div>


        <div class="carouselBackgroundDiv">
        </div>

    </div>
</div>



